<template>
  <view class="register-container">
    <uni-card>
      <view class="register-title">
        <text>用户注册</text>
      </view>
      
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item label="用户名" name="username">
          <uni-easyinput 
            v-model="formData.username"
            placeholder="请输入用户名"
          />
        </uni-forms-item>
        
        <uni-forms-item label="密码" name="password">
          <uni-easyinput
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
          />
        </uni-forms-item>
        
        <uni-forms-item label="确认密码" name="confirmPassword">
          <uni-easyinput
            v-model="formData.confirmPassword"
            type="password"
            placeholder="请再次输入密码"
          />
        </uni-forms-item>
        
        <uni-forms-item label="邮箱" name="email">
          <uni-easyinput
            v-model="formData.email"
            type="email"
            placeholder="请输入邮箱"
          />
        </uni-forms-item>
        
        <uni-forms-item label="手机号" name="phone">
          <uni-easyinput
            v-model="formData.phone"
            type="number"
            placeholder="请输入手机号"
          />
        </uni-forms-item>
      </uni-forms>
      
      <view class="btn-group">
        <button class="register-btn" @click="handleRegister" :loading="loading">
          注册
        </button>
        <view class="login-link" @click="goToLogin">
          已有账号？立即登录
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
import { request } from '@/utils/request';

export default {
  data() {
    return {
      loading: false,
      formData: {
        username: '',
        password: '',
        confirmPassword: '',
        email: '',
        phone: ''
      },
      rules: {
        username: {
          rules: [{
            required: true,
            errorMessage: '请输入用户名'
          }]
        },
        password: {
          rules: [{
            required: true,
            errorMessage: '请输入密码'
          }, {
            minLength: 6,
            errorMessage: '密码长度不能少于6位'
          }]
        },
        confirmPassword: {
          rules: [{
            required: true,
            errorMessage: '请再次输入密码'
          }, {
            validateFunction: (rule, value, data) => {
              return value === data.password;
            },
            errorMessage: '两次输入的密码不一致'
          }]
        },
        email: {
          rules: [{
            required: true,
            errorMessage: '请输入邮箱'
          }, {
            format: 'email',
            errorMessage: '邮箱格式不正确'
          }]
        },
        phone: {
          rules: [{
            required: true,
            errorMessage: '请输入手机号'
          }, {
            pattern: /^1[3-9]\d{9}$/,
            errorMessage: '手机号格式不正确'
          }]
        }
      }
    };
  },
  
  methods: {
    async handleRegister() {
      try {
        const valid = await this.$refs.form.validate();
        if (!valid) return;
        
        this.loading = true;
        const res = await request({
          url: '/auth/register',
          method: 'POST',
          data: {
            username: this.formData.username,
            password: this.formData.password,
            confirmPassword: this.formData.confirmPassword,
            email: this.formData.email,
            phone: this.formData.phone
          }
        });
        
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        });
        
        // 延迟跳转到登录页
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/login/login'
          });
        }, 1500);
        
      } catch (err) {
        uni.showToast({
          title: err.message || '注册失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    goToLogin() {
      uni.navigateBack();
    }
  }
};
</script>

<style>
.register-container {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.register-title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 30px;
}

.btn-group {
  margin-top: 30px;
}

.register-btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #007AFF;
  color: #fff;
  border-radius: 4px;
}

.login-link {
  margin-top: 15px;
  text-align: center;
  color: #007AFF;
  font-size: 14px;
}
</style> 